<template> 
  <div class="app-container">
    <div class="table-container">
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item label="输入搜索:">
          <el-input v-model="listQuery.keyword" placeholder="操作用户名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearchList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            style="float:right"
            @click="handleResetSearch()"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table ref="adminTable"
                :data="list"
                style="width: 100%;"
                v-loading="listLoading" border
                :header-cell-style="tableHeaderColor">
        <el-table-column label="主键id"  align="center">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>

        <el-table-column label="操作用户id" align="center">
          <template slot-scope="scope">{{scope.row.userId}}</template>
        </el-table-column>
        <el-table-column label="操作用户名" align="center">
          <template slot-scope="scope">{{scope.row.username}}</template>
        </el-table-column>
        <el-table-column label="请求ip" align="center">
          <template slot-scope="scope">{{scope.row.ip}}</template>
        </el-table-column>
<!--        <el-table-column label="请求url" align="center">-->
<!--          <template slot-scope="scope">{{scope.row.reqUrl}}</template>-->
<!--        </el-table-column>-->
        <el-table-column label="业务类型" align="center">
          <template slot-scope="scope">{{scope.row.businessType}}</template>
        </el-table-column>
        <el-table-column label="操作名称" align="center">
          <template slot-scope="scope">{{scope.row.operationName}}</template>
        </el-table-column>
<!--        <el-table-column label="请求参数" align="center">-->
<!--          <template slot-scope="scope">{{scope.row.reqParams}}</template>-->
<!--        </el-table-column>-->
        <el-table-column label="请求包名" align="center">
          <template slot-scope="scope">{{scope.row.packageName}}</template>
        </el-table-column>
        <el-table-column label="方法名称" align="center">
          <template slot-scope="scope">{{scope.row.methodName}}</template>
        </el-table-column>
        <el-table-column label="返回码" align="center">
          <template slot-scope="scope">{{scope.row.rspCode}}</template>
        </el-table-column>
        <el-table-column label="返回消息" align="center">
          <template slot-scope="scope">{{scope.row.rspMsg}}</template>
        </el-table-column>
        <el-table-column label="操作耗时(ms)" width="160" align="center">
          <template slot-scope="scope">{{scope.row.executeTime}}</template>
        </el-table-column>
        <el-table-column label="添加时间" width="160" align="center">
          <template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {listPages} from '@/api/logs';
  import {formatDate} from '@/utils/date';

  // 查询对象
  const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    keyword: null,
    startDate: null,
    endDate: null
  };


  // 默认页面数据
  export default {
    name: 'adminList',
    data() {
      return {
        // 查询对象
        listQuery: Object.assign({}, defaultListQuery),
        // 数据列表
        list: null,
        // 分页推向
        total: null,
        listLoading: false,
      }
    },
    created() {
      this.getList();
    },
    filters: {
      formatDateTime(time) {
        if (time == null || time === '') {
          return 'N/A';
        }
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    },
    methods: {
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return "background-color:#efefef;color:#333";
        }
      },
      handleResetSearch() {
        this.listQuery = Object.assign({}, defaultListQuery);
      },
      handleSearchList() {
        this.listQuery.pageNum = 1;
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      },
      getList() {
        this.listLoading = true;
        listPages(this.listQuery).then(response => {
          this.listLoading = false;
          this.list = response.data.records;
          this.total = response.data.total;
        });
      }
    }
  }
</script>
<style></style>


